<template>
  <div class="mainbox center">
    <img
      src="@/images/mx1gz2.png"
      class="xjimg"
      v-if="taskids == 2.13 && mxid == 1"
    />
    <img
      src="@/images/mx1gz2.png"
      class="xjimg"
      v-if="taskids == 2.14 && mxid == 1"
      @click="gotasks(2.15)"
    />
    <img
      src="@/images/mx1gz3.png"
      class="xjimg"
      v-if="taskids == 2.15 && mxid == 1"
      @click="gotasks(2.16)"
    />
    <img
      src="@/images/mx1gz4.png"
      class="xjimg"
      v-if="taskids == 2.16 && mxid == 1"
      @click="gotasks(2.2)"
    />
    <img
      src="@/images/mx1gz7.png"
      v-if="taskids == 2.3 && mxid == 1"
      class="xjimg"
      @click="gotasks(2.31)"
    />
    <img
      src="@/images/mx1gz8.png"
      v-if="taskids == 2.31 && mxid == 1"
      class="xjimg"
      @click="gotasks(3.1)"
    />
    <!-- 扫描定位线 -->
    <img
      src="@/images/mx1gz5.png"
      v-if="taskids == 2.2 && mxid == 1"
      class="xjimg"
      @click="gotasks(2.21)"
    />
    <img
      src="@/images/mx1gz6.png"
      v-if="taskids == 2.21 && mxid == 1"
      class="xjimg"
    />
    <!-- 选择模型2的时候如下 -->
    <img
      src="@/images/mx2gz2.png"
      class="xjimg"
      v-if="taskids == 2.13 && mxid == 2"
    />
    <img
      src="@/images/mx2gz2.png"
      class="xjimg"
      v-if="taskids == 2.14 && mxid == 2"
      @click="gotasks(2.15)"
    />
    <img
      src="@/images/mx2gz3.png"
      class="xjimg"
      v-if="taskids == 2.15 && mxid == 2"
      @click="gotasks(2.16)"
    />
    <img
      src="@/images/mx2gz4.png"
      class="xjimg"
      v-if="taskids == 2.16 && mxid == 2"
      @click="gotasks(2.2)"
    />
    <!-- 扫描定位线 -->
    <img
      src="@/images/mx2gz5.png"
      v-if="taskids == 2.2 && mxid == 2"
      class="xjimg"
      @click="gotasks(2.21)"
    />
    <img
      src="@/images/mx2gz6.png"
      v-if="taskids == 2.21 && mxid == 2"
      class="xjimg"
    />
    <img
      src="@/images/mx2gz7.png"
      v-if="taskids == 2.3 && mxid == 2"
      class="xjimg"
      @click="gotasks(2.31)"
    />
    <img
      src="@/images/mx2gz8.png"
      v-if="taskids == 2.31 && mxid == 2"
      class="xjimg"
      @click="gotasks(3.1)"
    />

    <!-- 输入框 -->
    <el-input
      v-model="hzname"
      placeholder="请输入姓名"
      class="hzbh hzname"
      ref="hzname"
      v-if="taskids < 2.16"
    ></el-input>
    <el-input
      v-model="hzage"
      placeholder="请输入年龄"
      class="hzbh hzage"
      ref="hzage"
      v-if="taskids < 2.16"
    ></el-input>
    <el-radio v-model="radio" label="1" class="hzhex" v-if="taskids < 2.16"
      >其他</el-radio
    >
    <!-- 测量中心数值 -->
    <!-- 模块1 -->
    <div class="center" v-if="taskids >= 3.1 && taskids <= 4.1 && mxid == 1">
      <!-- 背景     v-if="taskids == 2.31 && mxid == 2"-->
      <img
        src="@/images/mx1gz9.png"
        class="xjimg"
        v-if="taskids != 3.12 && taskids != 3.14 && taskids != 4.1"
      />
      <!-- 进床完成 -->
      <img src="@/images/mx1gz10.png" class="xjimg" v-if="taskids == 3.12" />
      <!-- 扫描完成 -->
      <img src="@/images/mx1gz11.png" class="xjimg" v-if="taskids == 3.14" />
      <!-- 扫描跳转前提示 -->
      <img src="@/images/mx1gz11.png" class="xjimg" v-if="taskids == 4.1" />
      <!-- 可拖动div -->
      <div
        class="ktdiv"
        :style="{
          width: `${width / 192}rem`,
          height: `${height / 192}rem`,
          left: `${x / 192}rem`,
          top: `${y / 192}rem`
        }"
        @mousedown="startDrag"
        ref="resizableDiv"
        v-if="taskids != 4.1"
      ></div>
      <!-- 进床按钮 -->
      <div class="jcbox" v-if="taskids == 3.11" @click="gotasks(3.12)"></div>
      <!-- 扫描按钮 -->
      <div class="jcbox" v-if="taskids == 3.12" @click="startfn"></div>

      <!-- 扫描进度框2 -->
      <div class="smjdbox">
        <div
          class="smjdboxprogress-bar"
          :style="{ width: progress + '%' }"
        ></div>
      </div>
    </div>
    <!-- 模块2 -->
    <div class="center" v-if="taskids >= 3.1 && taskids <= 4.1 && mxid == 2">
      <!-- 背景     v-if="taskids == 2.31 && mxid == 2"-->
      <img
        src="@/images/mx1gz9.png"
        class="xjimg"
        v-if="taskids != 3.12 && taskids != 3.14 && taskids != 4.1"
      />
      <!-- 进床完成 -->
      <img src="@/images/mx1gz10.png" class="xjimg" v-if="taskids == 3.12" />
      <!-- 扫描完成 -->
      <img src="@/images/mx1gz11.png" class="xjimg" v-if="taskids == 3.14" />
      <!-- 扫描跳转前提示 -->
      <img src="@/images/mx1gz11.png" class="xjimg" v-if="taskids == 4.1" />
      <!-- 可拖动div -->
      <div
        class="ktdiv"
        :style="{
          width: `${width / 192}rem`,
          height: `${height / 192}rem`,
          left: `${x / 192}rem`,
          top: `${y / 192}rem`
        }"
        @mousedown="startDrag"
        ref="resizableDiv"
        v-if="taskids != 4.1"
      ></div>
      <!-- 进床按钮 -->
      <div class="jcbox" v-if="taskids == 3.11" @click="gotasks(3.12)"></div>
      <!-- 扫描按钮 -->
      <div class="jcbox" v-if="taskids == 3.12" @click="startfn"></div>

      <!-- 扫描进度框2 -->
      <div class="smjdbox">
        <div
          class="smjdboxprogress-bar"
          :style="{ width: progress + '%' }"
        ></div>
      </div>
    </div>
    <!-- 跳转提示 -->
    <!-- 体部模体的图片没换 到时候出图需要重新 更新UI 一起更换 -->
    <div class="tctipbox center" v-if="taskids == 3.14">
      {{
        mxid == 1 ? '头部体模中心数值已测量完成' : '体部体模中心数值已测量完成'
      }}
      <div class="tool gjtoolqd" @click="gotasks(4)">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 测量中心数值完成 -->
    <!-- 测量上方数值提示 可改成通用模版-->
    <div
      class="tctipbox center"
      v-if="
        taskids == 4.1 || taskids == 5.1 || taskids == 6.1 || taskids == 7.1
      "
    >
      请进入CT室，将剂量探头移至头部体模右侧

      <div
        class="tool gjtoolqd"
        @click="gotasks(Number((Number(taskids) + 0.01).toFixed(2)))"
      >
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 测量步骤通用提示 -->
    <div class="tctipbox center" v-if="cltips != ''">
      {{ cltips }}
      <div class="tool gjtoolqd" @click="gocltipsfn">
        <img src="@/images/qd.png" alt="" class="normal" />
        <img src="@/images/qdac.png" alt="" class="active" />
        <div class="gjtoolname">确定</div>
      </div>
    </div>
    <!-- 测量上方数值步骤  模块1-->
    <div class="center" v-if="taskids >= 4.2 && mxid == 1">
      <img
        src="@/images/mx1gz13.png"
        class="xjimg"
        v-if="taskids == 4.2"
        @click="gotasks(4.21)"
      />
      <img
        src="@/images/mx1gz14.png"
        class="xjimg"
        v-if="taskids == 4.21 || taskids == 4.22"
        @click="startfn3(4.22)"
      />
      <img src="@/images/mx1gz14.png" class="xjimg" v-if="taskids == 4.23" />
      <!-- 扫描进度框3 -->
      <div class="smjdbox3" v-if="taskids >= 4.21 && taskids < 5">
        <div
          class="smjdboxprogress-bar"
          :style="{ width: progress + '%' }"
        ></div>
      </div>
    </div>
    <!-- 测量上方数值步骤完成 模块1 -->
    <!-- 测量上方数值步骤  模块1-->
    <div class="center" v-if="taskids >= 4.2 && mxid == 2">
      <img
        src="@/images/mx2gz13.png"
        class="xjimg"
        v-if="taskids == 4.2"
        @click="gotasks(4.21)"
      />
      <img
        src="@/images/mx2gz14.png"
        class="xjimg"
        v-if="taskids == 4.21 || taskids == 4.22"
        @click="startfn3(4.22)"
      />
      <img src="@/images/mx2gz14.png" class="xjimg" v-if="taskids == 4.23" />
      <!-- 扫描进度框3 -->
      <div class="smjdbox3" v-if="taskids >= 4.21">
        <div
          class="smjdboxprogress-bar"
          :style="{ width: progress + '%' }"
        ></div>
      </div>
    </div>
    <!-- 测量上方数值步骤完成 模块1 -->

    <!-- 测量右侧数值步骤  模块1-->
    <div class="center" v-if="taskids >= 5.2 && mxid == 1">
      <img
        src="@/images/mx1gz13.png"
        class="xjimg"
        v-if="taskids == 5.2"
        @click="gotasks(5.21)"
      />
      <img
        src="@/images/mx1gz14.png"
        class="xjimg"
        v-if="taskids == 5.21 || taskids == 5.22"
        @click="startfn3(5.22)"
      />
      <img src="@/images/mx1gz14.png" class="xjimg" v-if="taskids == 5.23" />
      <!-- 扫描进度框3 -->
      <div class="smjdbox3" v-if="taskids >= 5.21 && taskids < 6">
        <div
          class="smjdboxprogress-bar"
          :style="{ width: progress + '%' }"
        ></div>
      </div>
    </div>
    <!-- 测量上右侧数值步骤完成 模块1 -->
    <!-- 测量右侧数值步骤  模块2-->
    <div class="center" v-if="taskids >= 5.2 && mxid == 2">
      <img
        src="@/images/mx1gz13.png"
        class="xjimg"
        v-if="taskids == 5.2"
        @click="gotasks(5.21)"
      />
      <img
        src="@/images/mx1gz14.png"
        class="xjimg"
        v-if="taskids == 5.21 || taskids == 5.22"
        @click="startfn3(5.22)"
      />
      <img src="@/images/mx1gz14.png" class="xjimg" v-if="taskids == 5.23" />
      <!-- 扫描进度框3 -->
      <div class="smjdbox3" v-if="taskids >= 5.21 && taskids < 6">
        <div
          class="smjdboxprogress-bar"
          :style="{ width: progress + '%' }"
        ></div>
      </div>
    </div>
    <!-- 测量上右侧数值步骤完成 模块2 -->

    <!-- 测量下方数值步骤  模块1-->
    <div class="center" v-if="taskids >= 6.2 && mxid == 1">
      <img
        src="@/images/mx1gz13.png"
        class="xjimg"
        v-if="taskids == 6.2"
        @click="gotasks(6.21)"
      />
      <img
        src="@/images/mx1gz14.png"
        class="xjimg"
        v-if="taskids == 6.21 || taskids == 6.22"
        @click="startfn3(6.22)"
      />
      <img src="@/images/mx1gz14.png" class="xjimg" v-if="taskids == 6.23" />
      <!-- 扫描进度框3 -->
      <div class="smjdbox3" v-if="taskids >= 6.21 && taskids < 7">
        <div
          class="smjdboxprogress-bar"
          :style="{ width: progress + '%' }"
        ></div>
      </div>
    </div>
    <!-- 测测量下方数值步骤  模块1 -->

    <!-- 测量下方数值步骤  模块2-->
    <div class="center" v-if="taskids >= 6.2 && mxid == 2">
      <img
        src="@/images/mx1gz13.png"
        class="xjimg"
        v-if="taskids == 6.2"
        @click="gotasks(6.21)"
      />
      <img
        src="@/images/mx1gz14.png"
        class="xjimg"
        v-if="taskids == 6.21 || taskids == 6.22"
        @click="startfn3(6.22)"
      />
      <img src="@/images/mx1gz14.png" class="xjimg" v-if="taskids == 6.23" />
      <!-- 扫描进度框3 -->
      <div class="smjdbox3" v-if="taskids >= 6.21 && taskids < 7">
        <div
          class="smjdboxprogress-bar"
          :style="{ width: progress + '%' }"
        ></div>
      </div>
    </div>
    <!-- 测测量下方数值步骤  模块2 -->

    <!-- 测量左侧数值步骤  模块1-->
    <div class="center" v-if="taskids >= 7.2 && mxid == 1">
      <img
        src="@/images/mx1gz13.png"
        class="xjimg"
        v-if="taskids == 7.2"
        @click="gotasks(7.21)"
      />
      <img
        src="@/images/mx1gz14.png"
        class="xjimg"
        v-if="taskids == 7.21 || taskids == 7.22"
        @click="startfn3(7.22)"
      />
      <img src="@/images/mx1gz14.png" class="xjimg" v-if="taskids == 7.23" />
      <!-- 扫描进度框3 -->
      <div class="smjdbox3" v-if="taskids >= 7.21 && taskids < 7">
        <div
          class="smjdboxprogress-bar"
          :style="{ width: progress + '%' }"
        ></div>
      </div>
    </div>
    <!-- 测量左侧数值步骤  模块1 -->
  </div>
</template>

<script>
export default {
  props: {
    mxid: {
      type: Number // 注意：这里修正了typeof的拼写错误
    },
    taskids: {
      type: Number
    }
  },
  components: {},
  data() {
    return {
      hzname: '',
      hzage: '',
      radio: '',
      // 保持原有初始设置
      x: 300,
      y: 300,
      width: 200,
      height: 100,

      // 拖动相关变量
      isDragging: false,
      dragStartX: 0,
      dragStartY: 0,
      initialX: 0,
      initialY: 0,

      // 调整大小相关变量
      isResizing: false,
      resizeDirection: null, // 可能的值: 'left', 'right', 'top', 'bottom'
      resizeStartX: 0,
      resizeStartY: 0,
      initialWidth: 0,
      initialHeight: 0,
      borderThreshold: 5, // 边框识别阈值(px)
      // 新增：目标正确值和允许误差（方便后续修改）
      target: {
        x: 437,
        y: 216,
        width: 184,
        height: 101
      },
      tolerance: 2, // 允许±2的误差
      progress: 0,
      progressInterval: null,
      cltips: ''
    }
  },
  computed: {},
  watch: {
    // 监听姓名变化
    hzname() {
      this.checkAllFilled()
    },
    // 监听年龄变化
    hzage() {
      this.checkAllFilled()
    },
    // 监听单选框变化
    radio() {
      this.checkAllFilled()
    },
    x() {
      this.checkPositionAndSize()
    },
    y() {
      this.checkPositionAndSize()
    },
    width() {
      this.checkPositionAndSize()
    },
    height() {
      this.checkPositionAndSize()
    },
    taskids(i) {
      console.log('当前值', i)
      this.cltips = ''
      if (i) {
        this.progress = 0
      }
      if (i == 3.14) {
        this.progress = 100
      }
      if (i == 4.23) {
        this.progress = 100
        this.$nextTick(() => {
          this.cltips = '头部体模上方数值已测量完成'
        })
      }
      if (i == 5.23) {
        this.progress = 100
        this.$nextTick(() => {
          this.cltips = '头部体模右侧数值已测量完成'
        })
      }
      if (i == 6.23) {
        this.progress = 100
        this.$nextTick(() => {
          this.cltips = '头部体模下侧数值已测量完成'
        })
      }
      if (i == 7.23) {
        this.progress = 100
        this.$nextTick(() => {
          this.cltips = '头部体模左侧数值已测量完成'
        })
      }
      if (i == 3.1) {
        this.x = 300
        this.y = 300
        this.width = 200
        this.height = 100
      }
    }
  },
  methods: {
    gocltipsfn() {
      this.cltips = ''
      if (this.taskids == 4.23) {
        this.gotasks(4.3)
      }
    },
    startfn3(i) {
      this.gotasks(i)

      // 清除可能存在的定时器
      if (this.progressInterval) {
        clearInterval(this.progressInterval)
      }

      // 每50毫秒更新一次进度
      this.progressInterval = setInterval(() => {
        this.progress += 1

        // 进度完成时
        if (this.progress >= 100) {
          clearInterval(this.progressInterval)
          this.gotasks(Number((Number(i) + 0.01).toFixed(2)))
        }
      }, 50)
    },
    startfn() {
      this.gotasks(3.13)
      // 重置进度
      this.progress = 0

      // 清除可能存在的定时器
      if (this.progressInterval) {
        clearInterval(this.progressInterval)
      }

      // 每50毫秒更新一次进度
      this.progressInterval = setInterval(() => {
        this.progress += 1

        // 进度完成时
        if (this.progress >= 100) {
          clearInterval(this.progressInterval)
          this.gotasks(3.14)
        }
      }, 50)
    },
    checkPositionAndSize() {
      // 第二步：验证每个值是否在误差范围内（±2）
      const isXValid =
        this.x >= this.target.x - this.tolerance &&
        this.x <= this.target.x + this.tolerance
      const isYValid =
        this.y >= this.target.y - this.tolerance &&
        this.y <= this.target.y + this.tolerance
      const isWidthValid =
        this.width >= this.target.width - this.tolerance &&
        this.width <= this.target.width + this.tolerance
      const isHeightValid =
        this.height >= this.target.height - this.tolerance &&
        this.height <= this.target.height + this.tolerance

      // 第三步：所有值都通过验证时，控制台输出698
      if (isXValid && isYValid && isWidthValid && isHeightValid) {
        this.$emit('gotask', 3.11)
      }
    },
    // 检查所有字段是否都已填写
    checkAllFilled() {
      // 验证所有字段都有有效值
      if (this.hzname.trim() && this.hzage.trim() && this.radio) {
        this.$emit('gotask', 2.14)
      }
    },
    gotasks(i) {
      this.$emit('gotask', i)
    },
    // 处理光标样式变化
    handleCursorChange(e) {
      if (this.taskids != 3.1) return
      if (this.isDragging || this.isResizing) return

      const rect = this.$refs.resizableDiv.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top

      // 判断鼠标靠近哪个边框
      if (x < this.borderThreshold) {
        this.$refs.resizableDiv.style.cursor = 'ew-resize'
      } else if (x > rect.width - this.borderThreshold) {
        this.$refs.resizableDiv.style.cursor = 'ew-resize'
      } else if (y < this.borderThreshold) {
        this.$refs.resizableDiv.style.cursor = 'ns-resize'
      } else if (y > rect.height - this.borderThreshold) {
        this.$refs.resizableDiv.style.cursor = 'ns-resize'
      } else {
        this.$refs.resizableDiv.style.cursor = 'move'
      }
    },

    // 开始拖动或调整大小
    startDrag(e) {
      if (this.taskids != 3.1) return
      // 关键1：阻止浏览器默认行为（核心解决选中问题）
      e.preventDefault()
      // 关键2：阻止事件冒泡（避免影响其他元素）
      e.stopPropagation()
      const rect = this.$refs.resizableDiv.getBoundingClientRect()
      const x = e.clientX - rect.left
      const y = e.clientY - rect.top

      // 判断是否在调整大小的区域
      if (x < this.borderThreshold) {
        this.startResizing(e, 'left')
      } else if (x > rect.width - this.borderThreshold) {
        this.startResizing(e, 'right')
      } else if (y < this.borderThreshold) {
        this.startResizing(e, 'top')
      } else if (y > rect.height - this.borderThreshold) {
        this.startResizing(e, 'bottom')
      } else {
        // 否则开始拖动
        this.isDragging = true
        this.dragStartX = e.clientX
        this.dragStartY = e.clientY
        this.initialX = this.x
        this.initialY = this.y
      }
    },

    // 开始调整大小
    startResizing(e, direction) {
      if (this.taskids != 3.1) return
      // 关键：阻止默认行为（防止调整时选中其他内容）
      e.preventDefault()
      e.stopPropagation()
      this.isResizing = true
      this.resizeDirection = direction
      this.resizeStartX = e.clientX
      this.resizeStartY = e.clientY
      this.initialWidth = this.width
      this.initialHeight = this.height
      this.initialX = this.x
      this.initialY = this.y
    },
    // 处理鼠标移动
    handleMouseMove(e) {
      if (this.taskids != 3.1) return
      // 关键：只有在拖动/调整时才阻止默认事件（不影响正常操作）
      if (this.isDragging || this.isResizing) {
        e.preventDefault()
        e.stopPropagation()
      }
      if (this.isDragging) {
        // 拖动逻辑
        const deltaX = e.clientX - this.dragStartX
        const deltaY = e.clientY - this.dragStartY
        this.x = this.initialX + deltaX
        this.y = this.initialY + deltaY
      } else if (this.isResizing && this.resizeDirection) {
        // 调整大小逻辑，根据不同方向处理
        const deltaX = e.clientX - this.resizeStartX
        const deltaY = e.clientY - this.resizeStartY

        // 最小尺寸限制
        const minWidth = 50
        const minHeight = 50

        switch (this.resizeDirection) {
          case 'left': {
            // 左边框 - 改变宽度和x位置
            const newWidth = this.initialWidth - deltaX
            if (newWidth >= minWidth) {
              this.width = newWidth
              this.x = this.initialX + deltaX
            }
            break
          }
          case 'right':
            // 右边框 - 只改变宽度
            this.width = Math.max(minWidth, this.initialWidth + deltaX)
            break
          case 'top': {
            // 上边框 - 改变高度和y位置
            const newHeight = this.initialHeight - deltaY
            if (newHeight >= minHeight) {
              this.height = newHeight
              this.y = this.initialY + deltaY
            }
            break
          }
          case 'bottom':
            // 下边框 - 只改变高度
            this.height = Math.max(minHeight, this.initialHeight + deltaY)
            break
        }
      }
    },

    // 处理鼠标释放
    handleMouseUp() {
      this.isDragging = false
      this.isResizing = false
      this.resizeDirection = null
      this.handleCursorChange({
        clientX: 0,
        clientY: 0,
        target: this.$refs.resizableDiv
      }) // 重置光标
    }
  },
  mounted() {
    document.addEventListener('mousemove', this.handleMouseMove)
    document.addEventListener('mouseup', this.handleMouseUp)
    if (this.taskids == 3.1) {
      // 监听鼠标进入事件来改变光标样式
      this.$refs.resizableDiv.addEventListener(
        'mousemove',
        this.handleCursorChange
      )
    }
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.handleMouseMove)
    document.removeEventListener('mouseup', this.handleMouseUp)
    if (this.taskids == 3.1) {
      this.$refs.resizableDiv.removeEventListener(
        'mousemove',
        this.handleCursorChange
      )
    }
    // 组件销毁前清除定时器，防止内存泄漏
    if (this.progressInterval) {
      clearInterval(this.progressInterval)
    }
  }
}
</script>
<style scoped>
.mainbox {
  width: 100%;
  height: 100%;
}
.xjimg {
  width: 1184px;
  height: 698px;
}

.hzbh {
  position: absolute !important;
  top: 109px;
  left: 215px;
  width: 130px !important;
  border: 1px solid transparent;
}
.hzbh .el-input__inner {
  height: 35px !important;
  border: none !important;
  border-radius: 0px;
  background-color: transparent;
}

.hzname {
  top: 109px;
  left: 137px;
  width: 180px !important;
}
.hzage {
  top: 159px;
  left: 137px;
  width: 180px !important;
}
.hzhex {
  position: absolute;
  top: 219px;
  left: 217px;
}

.ktdiv {
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.452);
  position: absolute;
  z-index: 999;
  /* 初始宽高和位置通过JS控制，保持与您原有设置一致 */
}

/* 右下角调整大小的手柄样式 */
.resize-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0;
  bottom: 0;
  background-color: rgba(207, 207, 207, 0.144);
  cursor: se-resize;
}

.jcbox {
  width: 120px;
  height: 30px;
  border: 1px solid red;
  cursor: pointer;
  position: absolute;
  bottom: 25px;
  left: 80px;
}
.smjdbox {
  width: 165px;
  height: 25px;
  border: 1px solid rgb(168, 168, 168);
  position: absolute;
  right: 132px;
  bottom: 18px;
}
.smjdbox3 {
  width: 115px;
  height: 25px;
  border: 1px solid rgb(168, 168, 168);
  position: absolute;
  right: 108px;
  bottom: 18px;
}
/* 进度条样式 */
.smjdboxprogress-bar {
  height: 100%;
  background-color: #4caf50; /* 绿色进度条 */
}
.tctipbox {
  font-size: 22px;
  background-color: #065d14;
  width: 400px;
  height: 300px;
  color: #f1f7ff;
  padding: 10px;
  z-index: 9999;
}
.gjtoolqd {
  cursor: pointer;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translate(-50%, 0);
}
.gjtoolqd img {
  width: 142px;
  height: 69px;
}
.gjtoolname {
  font-size: 30px;
  letter-spacing: 2px;
  color: #ffffff;
  position: absolute;
  top: 9px;
}
</style>
